import './style.less'
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls.js';

const container = document.getElementById('app');

const scene = new THREE.Scene();

const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
camera.position.set(2, 2, 5);
camera.lookAt(1, 0, 0);

scene.add(camera);


const renderer = new THREE.WebGLRenderer({
    antialias: true
});   

renderer.setSize(window.innerWidth, window.innerHeight);          
    
container.appendChild(renderer.domElement); 


const controls = new OrbitControls(camera, renderer.domElement);            
controls.enableDamping = true;

const axesHelper = new THREE.AxesHelper(2);
scene.add(axesHelper);

const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);

const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ 
    color: 0xffffff ,
    emissive: 0xff0000,
});
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}

animate();

function onWindowResize() {
    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);
}
window.addEventListener('resize', onWindowResize, false);



//键盘监听wsad控制移动
let moveVector = new THREE.Vector3();
let speed = 0.05;
let keysEvent = {
    w:{
        enabled: false,
        handle(){
            moveVector.z = -speed;
        }
    },
    s:{
        enabled: false,
        handle(){
            moveVector.z = speed;
        }   
    },
    a:{
        enabled: false,
        handle(){
            moveVector.x = -speed;
        }
    },
    d:{
        enabled: false,
        handle(){
            moveVector.x = speed;
        }
    }

};

document.addEventListener('keydown', onKeyDown, false);
document.addEventListener('keyup', onKeyUp, false);

function onKeyDown(event) {
    let key = event.key.toLowerCase();
    if(keysEvent[key]){
        keysEvent[key].enabled = true;
    }

    
}

function onKeyUp(event) {
    let key = event.key.toLowerCase();
    if(keysEvent[key]){
        keysEvent[key].enabled = false;
    }
}
function update() {
    if(keysEvent.w.enabled){
        keysEvent.w.handle();
    }
    if(keysEvent.s.enabled){
        keysEvent.s.handle();
    }
    if(keysEvent.a.enabled){
        keysEvent.a.handle();
    }
    if(keysEvent.d.enabled){
        keysEvent.d.handle();
    }

    let angle =  controls.getAzimuthalAngle();

    moveVector.applyAxisAngle(THREE.Object3D.DEFAULT_UP,angle);
    cube.position.add(moveVector);
    camera.position.add(moveVector);
    controls.target.add(moveVector);

    moveVector.set(0, 0, 0);
}

setInterval(update, 1000 / 60);



function test2() {
   
   document.addEventListener('click', function(event) {
       //    console.log();
    //    console.log(camera.position);
       console.log(controls.target);
       return;
       //console.log(event.clientX, event.clientY);

        let v1=new THREE.Vector3(1,0,0);
        let v2=new THREE.Vector3(0,1,0);
        let v3=new THREE.Vector3(0,0,1);

        

        //    let v4=v1.applyAxisAngle(v2,Math.PI/4);
        //    console.log(v1);
        //    console.log(v2);
        //    console.log(v4);

        let v5=v1.distanceTo(v2);
        console.log(v1);
        console.log(v5);

    });
    
}

test2();






